<template>
  <div class="name">
    <h1>客户列表</h1>
    <template>
      <el-table :data="pageData.data" border style="width: 100%">
        <el-table-column fixed prop="_id" label="用户编号" width="280"></el-table-column>
        <el-table-column prop="userName" label="用户名" width="200"></el-table-column>
        <el-table-column label="用户类型" width="150">
          <template slot-scope="scope">
            <span style="margin-left: 10px" v-if="scope.row.userType==1">{{"会员"}}</span>
            <span style="margin-left: 10px" v-else>{{"普通用户"}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="salesmanId.userName" label="所属销售员" width="120"></el-table-column>
        <el-table-column prop="" label="" width="290"></el-table-column>
      </el-table>
    </template>
    <div class="block users-page">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageData.currentPage - 0"
        :page-sizes="[3, 4, 5]"
        :page-size="pageData.PageSize - 0"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageData.total - 0"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
import api from "../../../network/apis/api";
const { mapState, mapActions, mapMutations } = createNamespacedHelpers("users");
export default {
  data() {
    return {
      serachData: {
        type: "name",
        value: "",
      },
    };
  },
  created() {
    this.getAllUsers();
  },
  computed: {
    ...mapState(["pageData"]),
  },

  methods: {
    ...mapActions(["getAllUsers"]),
    // ...mapMutations(["setSearchData", "setTOPrevPage"]),

    //改变页面显示条数
    handleSizeChange(val) {
      this.pageData.pageSize = val;
     this.getAllUsers();
    },

    //修改当前页
    handleCurrentChange(val) {
      this.pageData.currentPage = val;
     this.getAllUsers();
    },
  },
};
</script>

<style scoped>
.users-page {
  margin-top: 40px;
}
</style>